import { View } from '@tarojs/components'
import { memo, useState } from 'react'
import useActivityQrcodeStore, { setFilter } from '../../useActivityQrcodeStore'
import { QrcodeTypeEnum } from '../../interface'
import './index.scss'

function Filter() {
  const filter = useActivityQrcodeStore(state => state.filter)
  const total = useActivityQrcodeStore(state => state.total)
  const [isExpanded, setIsExpanded] = useState(false)

  // 处理类型切换
  const handleTypeChange = (type: QrcodeTypeEnum) => {
    setFilter(filter.name, type)
  }

  // 切换展开/收起
  const toggleExpand = () => {
    setIsExpanded(!isExpanded)
  }

  return (
    <View className='qrcode-filter'>
      <View className='qrcode-filter__header'>
        <View className='qrcode-filter__title'>共 {total} 个结果</View>
        <View className='qrcode-filter__filter' onClick={toggleExpand}>
          <View className={`qrcode-filter__icon ${isExpanded ? 'expanded' : ''}`} />
          <View className='qrcode-filter__text'>筛选</View>
        </View>
      </View>
      {isExpanded && (
        <View className='qrcode-filter__content'>
          <View
            className={`qrcode-filter__item ${filter.type === QrcodeTypeEnum.CREATE_AND_USE ? 'active' : ''}`}
            onClick={() => handleTypeChange(QrcodeTypeEnum.CREATE_AND_USE)}
          >
            我创建的/我使用的
          </View>
          <View
            className={`qrcode-filter__item ${filter.type === QrcodeTypeEnum.PROMOTE ? 'active' : ''}`}
            onClick={() => handleTypeChange(QrcodeTypeEnum.PROMOTE)}
          >
            我推广的
          </View>
        </View>
      )}
    </View>
  )
}

export default memo(Filter)
